<template>
  <ul>
    <li v-for="course in courses.children">
      <a :href="getUrl(course.id)" v-text="course.name"></a>
    </li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        courses: [],
        action: 'categories'
      }
    },
    props: ['slug'],
    mounted () {
      this.getCourses()
    },
    methods: {
      getCourses: function () {
        let that = this
        let apiUrl = process.env.API_URL + that.action + '?expand=children&slug=' + that.slug
        that.$http.get(apiUrl).then(function (response) {
          that.courses = response.body.items[0]
        }, function (error) {
          console.log(error)
        })
      },
      getUrl: function (params) {
        return '/category/' + params
      }
    }
  }
</script>
